<template>
  <view class="content" :style="{ top: top + StatusBarRpx + 'rpx' }">
    <!-- 左边tab栏开始 -->
    <scroll-view class="left" scroll-with-animation="all 0.2s ease" :scroll-into-view="toLeftId" scroll-y>
      <view :upper-threshold="500" :id="`l_id${index}`" v-for="(item, index) in lists" :key="index"
        class="item text-center" :class="{ active: index == currentId }" @click="handleSelect(index)">
        {{ item.name }}
        <view class="cuIconlujing226"></view>
      </view>
    </scroll-view>
    <!-- 左边tab栏结束 -->
    <!-- 右边列表开始 -->
    <scroll-view class="right" scroll-with-animation="all 0.2s ease" refresher-background="transparent" scroll-y
      @scroll="scroll" :scroll-top="scrollTop" :refresher-triggered="refresherTriggered" :refresher-enabled="true"
      :refresher-threshold="100" @refresherrefresh="refresherrefresh">
      <block v-if="!isThreeLevel">
        <view class="cate-box-wrap" v-for="(item, index) in lists" :key="index">
          <!-- <view class="flex align-center justify-between text-333">
            <text class="cate-box-wrap-title text-bold text-df">{{ item.name }}</text>
          </view> -->
          <view class="cate-box">
            <view class="cate-box-item" v-for="(ele, j) in item.children" :key="j" @tap.stop="handlerClassify(ele)">
              <!-- <image style="width: 146rpx; height: 146rpx" :src="ele.thumb" mode="aspectFill" />
              <text class="text-333 text-sm goods_title">{{ ele.name }}</text> -->
              <view class='flex flex-wrap align-stretch fd1_0'>
                <image class='fd1_0_c0' mode="aspectFit" :src='STATIC_URL+"94.png"'></image>
                <view class='flex flex-direction flex-wrap align-stretch self-center flex-sub fd1_0_c1'>
                    <view class='flex flex-wrap align-center fd1_0_c1_c0'>
                        <text class='fd1_0_c1_c0_c0'>{{ ele.name }}</text>
                    </view>
                    <view class='flex flex-wrap align-center fd1_0_c1_c1'>
                        <!-- <text class='fd1_0_c1_c1_c0'>发布:</text> -->
                        <text class='fd1_0_c1_c1_c0'> {{ ele.tiem }}</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-between'>
                        <view class='flex flex-wrap align-center'>
                            <text class='fd1_0_c1_c1_c0'>共</text>
                            <text class='fd1_0_c1_c1_c0'>{{ele.zhangjie}}</text>
                            <text class='fd1_0_c1_c1_c0'>章节</text>
                        </view>
                        <view class='flex flex-wrap align-center'>
                            <text class='fd1_0_c1_c1_c0'>{{ele.people}}</text>
                            <text class='fd1_0_c1_c1_c0'>人学习</text>
                        </view>
                    </view>
                </view>
            </view>
            </view>
          </view>
        </view>
      </block>

      <block v-else>
        <view class="cate-box-wrap" v-for="(item, index) in lists" :key="index">
          <view v-for="(ele, key) in item.children" :key="key">
            <view class="flex align-center justify-between text-333">
              <text class="cate-box-wrap-title text-bold text-df">{{ ele.name }}</text>
            </view>
            <view class="cate-box">
              <view class="cate-box-item" v-for="(e, j) in ele.children" :key="j" @tap.stop="handlerClassify(ele)">
                <image style="width: 146rpx; height: 146rpx" :src="e.thumb" mode="aspectFill" />
                <text class="text-333 text-sm goods_title">{{ e.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
    <!-- 右边列表结束 -->
  </view>
</template>
<script>
export default {
  name: 'benben-goods-classify',
  props: {
    // 分类列表
    lists: {
      type: Array,
      default: () => [],
    },
    top: {
      type: [Number, String],
      default: 88,
    },
    isThreeLevel: {
      type: Boolean,
      default: false,
    },
    handleId: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      refresherTriggered: false,
      heightArr: [],
      flag: false,
      setTimeoutFn: null,
      setTimeoutLists: null,
      scrollTop: '',
      toLeftId: '',
      currentId: 0, //选中id
      setTimeoutHandle: null,
    }
  },
  watch: {
    lists: {
      handler() {
        this.setTimeoutLists && clearTimeout(this.setTimeoutLists)
        this.setTimeoutLists = setTimeout(this.getHeight, 300)
      },
      deep: true,
      immediate: true,
    },
  },
  components: {},
  computed: {},
  onLoad() { },
  mounted() { },
  methods: {
    refresherrefresh() {
      this.refresherTriggered = true
      setTimeout(() => {
        this.refresherTriggered = false
        this.$emit('refresh')
      }, 500)
    },
    scroll(e) {
      this.setTimeoutFn && clearTimeout(this.setTimeoutFn)
      this.setTimeoutFn = setTimeout(() => {
        let height = e.target.scrollTop
        let index = this.heightArr.findIndex((item) => height >= item.minHeight && height < item.maxHeight)
        this.currentId = index == -1 ? 0 : index
        this.toLeftId = `l_id${index >= 3 ? index - 3 : 0}`
      }, 100)
    },
    /**
     * @event
     * @description  tab切换
     * @param {Number} item -当前选中数据  //暂时没用
     * @param {Number} index - 选中下标
     * @return {Boolean}
     * */
    handleSelect(index) {
      this.scrollTop = this.heightArr[index].minHeight
    },
    handlerClassify(item) {
      this.$emit('update:handle-id', item.aid)
      this.$emit('handle-item', item)
    },
    getHeight() {
      uni
        .createSelectorQuery()
        .in(this)
        .selectAll('.cate-box-wrap')
        .boundingClientRect()
        .exec((res) => {
          // console.log(res)
          let heightArr = []
          let height = 0
          res[0].map((item) => {
            let obj = { minHeight: height > 0 ? height - 10 : height }
            height += Math.floor(item.height)
            obj.maxHeight = height - 10
            heightArr.push(obj)
          })
          this.heightArr = heightArr
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  background-color: #fff;
  text-align: center;
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
}

.goods_title {
  width: 146rpx;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //用省略号显示
  white-space: nowrap; //不换行
}

.content {
  border-top: 1px solid #f8f8f8;
  position: fixed;
  bottom: var(--window-bottom);
  display: flex;

  .left {
    width: 192rpx;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    margin-right: 20rpx;
   

    .item {
      width: 100%;
      height: 136rpx;
      line-height: 136rpx;
      font-size: 28rpx;
      color: #333333;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .item.active {
      background: rgba(205, 150, 45, 0.2);
      color: #CD962D;
      font-weight: bold;
      position: relative;
      border-radius: 0px 16rpx 0px 0px;
      &::before {
        content: '';
        width: 8rpx;
        height: 34rpx;
        background: rgba(205, 150, 45, 1);
        opacity: 1;
        border-radius: 7rpx;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }

  .right {
    width: 570rpx;
    height: 100%;
    background-color: #fff;
  }
}

.cate-box-wrap {
  .cate-box-wrap-title {
    line-height: 80rpx;
    padding: 0 32rpx;
  }

  &:last-child {
    // min-height: calc(100vh - var(--window-bottom) - var(--window-top));
    min-height: 100%;
  }

  .cate-box {
    display: flex;
    flex-wrap: wrap;

    .cate-box-item {
      // display: flex;
      // flex-direction: column;
      // align-items: center;
      padding-right: 24rpx;
      width: 100%;
      text-align: center;
      padding-bottom: 20rpx;
    }
  }
}
.flex_0 {
        background: #fff;
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .fd0_0_c1_c0 {
        font-size: 36rpx;
        font-weight: 700;
        color: #333;
        line-height: 88rpx;
    }

    .fd0_0_c0_c0 {
        font-size: 36rpx;
        color: #333;
    }

    .fd0_0_c0 {
        width: 50rpx;
        height: 50rpx;
    }

    .fd0_0 {
        padding: 0rpx 32rpx 0rpx 32rpx;
    }

    .fd1_0_c1_c1_c0 {
        color: #636363;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 40rpx;
    }

    .fd1_0_c1_c1 {
        margin: 0rpx 0rpx 16rpx 0rpx;
    }

    .fd1_0_c1_c0_c0 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
    }

    .fd1_0_c1_c0 {
        margin: 0rpx 0rpx 24rpx 0rpx;
    }

    .fd1_0_c1 {
        margin: 0rpx 0rpx 0rpx 24rpx;
    }

    .fd1_0_c0 {
        width: 160rpx;
        height: 160rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .fd1_0 {
        margin: 0rpx 24rpx 0rpx 24rpx;
    }
</style>
